<template>
  <div class="home-container fadeIn">
    <div class='homeInfo-content'>
      <el-form ref="form" :model="form" class="demo-form-inline">
        <h2>基本信息</h2>
        <div class="item-box">
          <el-form-item label="用户名：">
            <el-input :disabled="true" v-model="form.username"></el-input>
          </el-form-item>
        </div>
        <div class="item-box">
          <el-form-item label="是否认证：">
            <el-input :disabled='true' v-model="form.certificate===0?'未审核通过':'审核通过'"></el-input>
          </el-form-item>
        </div>
        <div class="item-box">
          <el-form-item label="邮箱：">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
        </div>
        <div class="item-box">
          <el-form-item label="QQ号：">
            <el-input v-model="form.qq"></el-input>
          </el-form-item>
        </div>
        <div class="item-box">
          <el-form-item label="手机号：">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
        </div>
        <div class="item-box">
          <el-form-item label="省份：">
            <el-input v-model="form.province"></el-input>
          </el-form-item>
        </div>
        <div class="item-box">
          <el-form-item label="城市：">
            <el-input v-model="form.city"></el-input>
          </el-form-item>
        </div>
        <h2>财务信息</h2>
        <div class="item-box">
          <el-form-item label="银行名称：">
            <el-input v-model="form.bankName"></el-input>
          </el-form-item>
        </div>
        <div class="item-box">
          <el-form-item label="银行卡申请地：">
            <el-input v-model="form.bankAddress"></el-input>
          </el-form-item>
        </div>
        <div class="item-box">
          <el-form-item label="银行卡号：">
            <el-input v-model="form.bankCardNo"></el-input>
          </el-form-item>
        </div>
        <div class="item-box">
          <el-form-item label="持卡人：">
            <el-input v-model="form.bankCardName"></el-input>
          </el-form-item>
        </div>
        <h2>认证信息</h2>
        <div class="item-box">
          <el-form-item label="头像：">
            <el-upload
              class="avatar-uploader"
              action="http://47.74.23.35:81/upload-IMAGES"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </div>
        <div  class="item-box">
          <el-form-item>
           <el-button type="primary" @click="onSubmit">保存</el-button>
         </el-form-item>
        </div>
      </el-form>
      <el-form ref="formUpdate" :model="formUpdate" :rules='rulesUpdate' class="demo-form-inline updatePwd">
        <h2>修改密码</h2>
        <div class="item-box">
          <el-form-item label="原密码：">
            <el-input v-model="formUpdate.oldPwd"></el-input>
          </el-form-item>
        </div>
        <div class='item-box'>
          <el-form-item prop="password"  label="新密码：">
            <el-input type="password" v-model="formUpdate.newPwd" placeholder='请输入新密码' @keyup.enter.native="updateSubmit" auto-complete="off"></el-input>
          </el-form-item>
        </div>
        <div class='item-box'>
          <el-form-item prop="newPassword" label="确认密码：">
            <el-input type="password" v-model="formUpdate.newPassword" placeholder='请在输入密码' @keyup.enter.native="updateSubmit" auto-complete="off"></el-input>
          </el-form-item>
        </div>
        <div  class="item-box">
          <el-form-item>
           <el-button type="primary" @click="updateSubmit">修改密码</el-button>
         </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { queryString } from '@/utils';

export default {
  name: 'HomeInfo',
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.formUpdate.newPwd !== '') {
          this.$refs.formUpdate.validateField('newPassword');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.formUpdate.newPwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      formUpdate: {
        oldPwd: '',
        newPwd: '',
        newPassword: '',
      },
      rulesUpdate: {
        oldPwd: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
        newPwd: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在6到12个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在6到12个字符', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' },
        ],
      },
      form: {
        cover: '',
        realname: '',
        bankCardName: '',
        bankCardNo: '',
        bankName: '',
        bankAddress: '',
        auditMsg: '',
        certificate: '',
        city: '',
        province: '',
        address: '',
        qq: '',
        email: '',
        phone: '',
        nickname: '',
      },
      isSubmit: false,
      imageUrl: '',
    };
  },
  computed: {
    ...mapState('info', [
      'info',
    ]),
  },
  mounted() {
    this.setInfo(queryString({ userId: this.$getLS('userId') })).then(() => {
      this.form = {
        cover: this.info.cover === 'null' ? '' : this.info.cover,
        username: this.info.username === 'null' ? '' : this.info.bankCardName,
        bankCardName: this.info.bankCardName === 'null' ? '' : this.info.bankCardName,
        bankCardNo: this.info.bankCardNo === 'null' ? '' : this.info.bankCardNo,
        bankName: this.info.bankName === 'null' ? '' : this.info.bankName,
        bankAddress: this.info.bankAddress === 'null' ? '' : this.info.bankAddress,
        certificate: this.info.certificate === 'null' ? '' : this.info.certificate,
        city: this.info.city === 'null' ? '' : this.info.city,
        province: this.info.province === 'null' ? '' : this.info.province,
        address: this.info.address === 'null' ? '' : this.info.address,
        qq: this.info.qq,
        email: this.info.email,
        phone: this.info.phone,
        nickname: this.info.nickname === 'null' ? '' : this.info.nickname,
        userId: this.$getLS('userId'),
      };
    });
  },
  components: {
  },
  methods: {
    ...mapActions('info', [
      'setInfo',
      'updatePwd',
      'updateUserInfo',
    ]),
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid && !this.isSubmit) {
          this.form.address = `${this.form.province}-${this.form.city}`;
          this.form.cover = this.imageUrl;
          return this.updateUserInfo(queryString(this.form))
          .then((res) => {
            setTimeout(() => {
              this.isSubmit = false;
            }, 5000);

            if (!res) {
              this.$message.warning(res.data.message);
            }
          });
        }
        return false;
      });
    },
    // 上出演
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    updateSubmit() {
      this.$refs.formUpdate.validate((valid) => {
        if (valid && !this.isSubmit) {
          return this.updatePwd(queryString({
            userId: this.$getLS('userId'),
            oldPwd: this.$md5(this.formUpdate.oldPwd).toUpperCase(),
            newPwd: this.$md5(this.formUpdate.newPwd).toUpperCase(),
          }))
          .then((res) => {
            setTimeout(() => {
              this.isSubmit = false;
            }, 5000);

            if (!res) {
              this.$message.warning(res.data.message);
            }
          });
        }
        return false;
      });
    },
  },
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style lang='scss' src='@/scss/pages/home_index.scss'/>
